<template>
  <div class="fault-container">
    <div class="page-header">
      <h1>BMS Fault Management</h1>
      <p>Monitor and manage BMS fault conditions</p>
    </div>
    
    <div class="fault-content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>Fault Records</span>
            <el-button type="primary" size="small">Clear All</el-button>
          </div>
        </template>
        
        <el-table :data="faultData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="faultCode" label="Fault Code" width="120" />
          <el-table-column prop="description" label="Description" />
          <el-table-column prop="severity" label="Severity" width="100">
            <template #default="scope">
              <el-tag :type="getSeverityType(scope.row.severity)">
                {{ scope.row.severity }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="device" label="Device" width="120" />
          <el-table-column prop="time" label="Time" width="180" />
          <el-table-column prop="status" label="Status" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'Active' ? 'danger' : 'success'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const faultData = ref([
  {
    id: 1,
    faultCode: 'F001',
    description: 'Over voltage protection triggered',
    severity: 'High',
    device: 'BMS-001',
    time: '2024-01-15 10:30:25',
    status: 'Active'
  },
  {
    id: 2,
    faultCode: 'F002',
    description: 'Temperature sensor failure',
    severity: 'Medium',
    device: 'BMS-002',
    time: '2024-01-15 09:15:10',
    status: 'Resolved'
  },
  {
    id: 3,
    faultCode: 'F003',
    description: 'Communication timeout',
    severity: 'Low',
    device: 'BMS-003',
    time: '2024-01-15 08:00:00',
    status: 'Active'
  }
])

const getSeverityType = (severity: string) => {
  const types = {
    'High': 'danger',
    'Medium': 'warning',
    'Low': 'info'
  }
  return types[severity as keyof typeof types] || 'info'
}
</script>

<style lang="scss" scoped>
.fault-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 30px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #909399;
      margin: 0;
    }
  }
  
  .fault-content {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
